<template>
  <div id="share-modal">
    <a-modal v-model:visible="visible" title="分享图片" :footer="false">
      <h4>复制分享链接</h4>
      <a-typography-link copyable>
        {{ link }}
      </a-typography-link>
      <div style="margin-bottom: 16px" />
      <h4>手机扫码查看</h4>
      <a-qrcode :value="link" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

/**
 * 定义组件属性类型
 */
interface Props {
  title: string
  link: string
}

/**
 * 传入的组件赋初值
 */
const props = withDefaults(defineProps<Props>(), {
  title: () => '分享',
  link: () => 'https://space.bilibili.com/432460619',
})

/**
 * 控制弹窗是否可见,默认关闭
 */
const visible = ref(false)

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
}

// 暴露openModal函数，外部可以使用
defineExpose({
  openModal,
})
</script>
<style scoped>
#share-model .sider {
}
</style>
